<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		body{
			perspective: 2000px;
			transform-style: preserve-3d;
		}
		section{
			position: relative;
			width: 400px;
			height: 400px;
			margin: 151px auto;
			transform-style: preserve-3d;
			animation: rotate 10s linear infinite;
		}
		section:hover{
			animation-play-state: paused;
		}
		@keyframes rotate{
			0%{
				transform: rotateY(0);
			}
			100%{
				transform: rotateY(360deg);
			}
		}
		section div{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
		}
		section div:nth-child(1){
			transform: rotateX(-45deg) translateZ(200px);
		}
		section div:nth-child(2){
			transform: rotateY(90deg) rotateZ(45deg) translateZ(200px);
		}
		section div:nth-child(3){
			transform: rotateY(180deg) rotateX(-45deg) translateZ(200px);
		}
		section div:nth-child(4){
			transform: rotateY(270deg) rotateZ(-45deg) translateZ(200px);
		}
		section div:nth-child(5){
			transform: rotateX(90deg) rotateX(-45deg) translateZ(200px);
		}
		section div:nth-child(6){
			transform: rotateX(-90deg) rotateX(45deg) translateZ(-200px);
		}
	</style>
</head>

<body>
	<section>
		<div><img src="upload/女生1.jpg"></div>
		<div><img src="upload/女生2.jpg"></div>
		<div><img src="upload/女生3.jpg"></div>
		<div><img src="upload/女生4.jpg"></div>
		<div><img src="upload/女生5.jpg"></div>
		<div><img src="upload/女生6.jpg"></div>
	</section>
</body>
</html>
